<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="550"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // Helper function to draw an arrow with a filled head
    function drawArrow(ctx, fromx, fromy, tox, toy) {
        const headlen = 12;
        const dx = tox - fromx;
        const dy = toy - fromy;
        const angle = Math.atan2(dy, dx);
        ctx.save();
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2.5;

        // Line part of the arrow
        ctx.beginPath();
        ctx.moveTo(fromx, fromy);
        ctx.lineTo(tox, toy);
        ctx.stroke();

        // Arrowhead
        ctx.beginPath();
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 7), toy - headlen * Math.sin(angle - Math.PI / 7));
        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 7), toy - headlen * Math.sin(angle + Math.PI / 7));
        ctx.closePath();
        ctx.fill();
        ctx.restore();
    }

    // --- Main Drawing Logic ---

    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;

    // Define coordinates and dimensions
    const Ax = 120, Ay = 150;
    const Bx = 120, By = 300;
    const Cx = 370, Cy = 300;
    const wallThickness = 8;

    // Draw the pipe structure (as two nested triangles)
    // Outer triangle
    ctx.beginPath();
    ctx.moveTo(Ax, Ay);
    ctx.lineTo(Bx, By);
    ctx.lineTo(Cx, Cy);
    ctx.lineTo(Ax, Ay);
    ctx.stroke();

    // Inner triangle
    const A_in_x = Ax + wallThickness;
    const A_in_y = Ay + wallThickness;
    const B_in_x = Bx + wallThickness;
    const B_in_y = By - wallThickness;
    const C_in_x = Cx - wallThickness;
    const C_in_y = Cy - wallThickness;

    ctx.beginPath();
    ctx.moveTo(A_in_x, A_in_y);
    ctx.lineTo(B_in_x, B_in_y);
    ctx.lineTo(C_in_x, C_in_y);
    ctx.lineTo(A_in_x, A_in_y);
    ctx.stroke();

    // Vertex Labels
    ctx.font = '20px Times New Roman';
    ctx.fillText('A', Ax - 25, Ay + 5);
    ctx.fillText('B', Bx - 25, By + 15);
    ctx.fillText('C', Cx + 5, Cy + 5);

    // Dashed horizontal line
    ctx.save();
    ctx.setLineDash([4, 4]);
    ctx.lineWidth = 1.5;
    ctx.beginPath();
    ctx.moveTo(Ax, Ay);
    ctx.lineTo(Ax + 150, Ay);
    ctx.stroke();
    ctx.restore();

    // Text label for the horizontal line
    ctx.font = '20px KaiTi';
    ctx.fillText('水平线', Ax + 160, Ay + 5);

    // Points 1, 2, 3 and their labels
    ctx.font = '20px Arial';

    // Point 3 (at vertex A)
    const p3x = Ax - 3, p3y = Ay - 3; // Slightly offset for visibility
    ctx.beginPath();
    ctx.arc(p3x, p3y, 3, 0, 2 * Math.PI);
    ctx.fill();
    ctx.fillText('3', Ax - 15, Ay - 10);

    // Two small dots for points 1 and 2 inside the channel
    const p1x = Ax + 4;
    const p1y = Ay + 18;
    const p2x = Ax + 12;
    const p2y = Ay + 13;
    
    ctx.beginPath();
    ctx.arc(p1x, p1y, 2.5, 0, 2 * Math.PI); // Point 1
    ctx.fill();
    
    ctx.beginPath();
    ctx.arc(p2x, p2y, 2.5, 0, 2 * Math.PI); // Point 2
    ctx.fill();

    // Labels for 1 and 2
    ctx.font = '16px Arial';
    ctx.fillText('1', Ax - 20, p1y + 5);
    ctx.fillText('2', p2x + 10, p2y + 5);

    // Projectile velocity arrow, starting from vertex A
    drawArrow(ctx, Ax, Ay, Ax + 60, Ay - 60);
    
    // Draw the ground level
    // Problem states: height of BC from ground = length of AB
    const groundY = By + (By - Ay);
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(50, groundY);
    ctx.lineTo(450, groundY);
    ctx.stroke();

    // Draw hatches on the ground line
    ctx.lineWidth = 1.5;
    for (let i = 60; i < 450; i += 20) {
        ctx.beginPath();
        ctx.moveTo(i, groundY);
        ctx.lineTo(i - 10, groundY + 10);
        ctx.stroke();
    }
</script>
</body>
</html>